<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>保卫背景审查管理系统</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../css/common/index.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <!-- 顶栏导航 begin -->
    <div class="layui-header">
        <div class="layui-logo">
            <img src="../images/logo.png" class="x-logo">
            <img src="../images/title.png" class="x-top-title">
        </div>
        <div class="layui-layout-right">
            <ul class="layui-nav x-top-nav">
                <li class="layui-nav-item active">
                    <a href="javascript:void(0)">
                        <div class="nav-top-item">
                            <img class="nav-top-icon" src="../images/nav/nav-index.png">
                            首页
                        </div>
                        <i class="split-line"></i>
                    </a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:void(0)">
                        <div class="nav-top-item">
                            <img class="nav-top-icon" src="../images/nav/nav-index.png">
                            任务核查
                        </div>
                        <i class="split-line"></i></a></li>
                <li class="layui-nav-item">
                    <a href="javascript:void(0)">
                        <div class="nav-top-item">
                            <img class="nav-top-icon" src="../images/nav/nav-index.png">
                            人员管理
                        </div>
                        <i class="split-line"></i></a></li>
                <li class="layui-nav-item">
                    <a href="javascript:void(0)">
                        <div class="nav-top-item">
                            <img class="nav-top-icon" src="../images/nav/nav-tjfx.png">
                            统计分析
                        </div>
                        <i class="split-line"></i>
                    </a>
                </li>
            </ul>
            <ul class="x-nav-user">
                <li class="layui-nav-item">
                    <dl class="x-user-info">
                        <dd class="x-user-photo">
                            <img src="../images/user.png">
                        </dd>
                        <dd class="x-user-text-box">
                            <span class="x-user-name">系统管理员：王要得</span>
                            <span class="x-user-score">积分：279</span>
                        </dd>
                        <dd class="x-user-logout">
                            <img class="nav-logout-icon" src="../images/nav/nav-logout.png">
                        </dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <!-- 顶栏导航 end -->

    <!-- 主体内容 begin -->
    <div class="layui-body  layui-body-panel">
        <div class="layui-tab" lay-filter="headTabPage">
            <div class="layui-tab-box">
                <ul class="layui-tab-title">
                    <li lay-id="0" class="layui-this">核查明细</li>
                    <li lay-id="1">任务管理</li>
                    <li lay-id="2">人员列表</li>
                    <li lay-id="3">添加人员</li>
                    <li lay-id="4">新建任务</li>
                    <li lay-id="5">用户界面</li>
                </ul>
            </div>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <iframe src="detail.html"></iframe>
                </div>
                <div class="layui-tab-item">
                    <iframe src="task-list.html"></iframe>
                </div>
                <div class="layui-tab-item">
                    <iframe src="people-list.html"></iframe>
                </div>
                <div class="layui-tab-item">
                    <iframe src="addPerson.html"></iframe>
                </div>
                <div class="layui-tab-item">
                    <iframe src="addMission.html"></iframe>
                </div>
                <div class="layui-tab-item">
                    <iframe src="user-list.html"></iframe>
                </div>
            </div>
        </div>
    </div>
    <!-- 主体内容 end -->

    <!-- 底栏 begin -->
    <div class="layui-footer layui-footer-full">
        <!-- 底部固定区域 -->
        主程序版本号: V1.0.0.1
    </div>
    <!-- 底栏 end -->
</div>
<script src="../../lib/layui/layui.all.js"></script>
<script src="../../lib/jquery-1.9.1.min.js"></script>
<script>
    (function () {
        var element = layui.element
        var currentShowTabpage = '0' // 当前显示页签

        var _fn = {
            // 页面选项卡变化执行
            tabPageChange: function (data) {
                // 缓存当前选中tab lay-id
                currentShowTabpage = this.getTabList()[data.index]
            },
            /**
             * 页面选项卡新增
             * @param Ltitle 选项卡显示标题
             * @param url 选项内容填充iframe url
             * @param Lid 内容lay-id
             */
            addTabPage: function (Ltitle, url, Lid) {
                element.tabAdd('tabPage', {
                    title: Ltitle
                    , content: '<iframe src="' + url + '"></iframe>'
                    , id: Lid
                });
                this.switchTabPage(Lid)
            },
            /**
             *  切换页面选项卡操作
             * @param id 需要切换到页面的 lay-id
             */
            switchTabPage: function (id) {
                if (id) {
                    element.tabChange('tabPage', id);
                }
            },
            /**
             *  获取当前选项卡集合
             * @returns {Array} 选项卡页面 lay-id  集合
             */
            getTabList: function () {
                var _result = [],
                    _tabListDom = $('#tabPage').children('li')
                for (var i = 0; i < _tabListDom.length; i++) {
                    _result.push($(_tabListDom[i]).attr('lay-id'))
                }
                return _result
            }
        }

        // tabPage 切换监控
        element.on('tab(headTabPage)', function (data) {
            _fn.tabPageChange(data)
        })
    })()
</script>
</body>
</html>